.autocompleteEmails-container {
    color: $default-color;
    font-size: 13px;
    width: 100%;
}

.autocompleteEmails-admin {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    min-height: 30px;
    line-height: 30px;
    padding: 0;
    vertical-align: middle;
    width: 100%;
    position: relative;
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden
}


.autocompleteEmails-item {
    border: 1px solid $default-color-light;
    background-color: $tertiary;
    margin-top: 5px;
    text-shadow: none;
    border-radius: 2px;
    padding-left: 5px;
    margin-right: 5px;
    display: flex;
    flex-direction: row;
    line-height: 22px;
    height: 22px;
    max-width: 85%;
    min-width: 0
}

.autocompleteEmails-item-invalid {
    border-color: $bug;
    color: $bug;
}

.autocompleteEmails-item-warning {
    border-color: $exp;
    color: $exp;
}

.autocompleteEmails-label {
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow: hidden;
    white-space: nowrap
}
/* Generated via autocompleteEmailsItem by the directive */
.autocompleteEmailsItem-icon-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: .2em
}

.autocompleteEmails-field .visually-hidden {
    @extend .sr-only;
}

.autocompleteEmails-field {
    flex: 1;
    min-width: 15%
}

.autocomplete-container .awesomplete {
    display: block;
    position: static;
}

.autocomplete-container .awesomplete,
.autocompleteEmails-autocomplete  {
    input {width: 100%}
    ::-ms-clear { display: none; width:0; height:0 }

    ul {
        border-radius: 0;
        max-height: 150px;
        overflow: auto;
        z-index: 99999;
        border: 1px solid $border;
        background-color: $white;
        box-shadow: none;
        transform: scale(1) !important;
        transition-duration: 0s !important;
    }

    ul[hidden] {pointer-events: none;}

    ul:empty,
    ul::before {display: none}

    li[aria-selected="true"], li[aria-selected="true"]:hover {background-color: $default-color-light}

    li:hover {background-color: $light}

    li,
    li:hover,
    li[aria-selected="true"],
    li[aria-selected="true"]:hover {color: $default-color }

    mark,
    li:hover mark,
    li[aria-selected="true"] mark {
        color: inherit;
        background-color: transparent;
        font-weight: bold
    }
}

.autocompleteEmails-autocomplete {
    border-radius: 0;
    max-height: 150px;
    overflow: auto;
    z-index: 9000;
    border: 1px solid $border;
    background-color: $white;
    box-shadow: none;
    transform: scale(1) !important;
    transition-duration: 0s !important;

    [hidden] {pointer-events: none;}
    :empty {display: none}
    ::before {display: none}
}


.autocompleteEmails-autocomplete {

    position: absolute;
    width: 92%;
    li { padding: 0 .5em }

    &:empty,
    &::before,
    &[hidden] {
        pointer-events: none;
        display: none
    }
}

.autocompleteEmails-btn-remove {
    cursor: pointer;
    background: transparent;
    border: 0
}

.autocompleteEmails-btn-remove:focus,
.autocompleteEmails-btn-remove:active { color: #F35D5D }

